<template>
    <div>
        <teleport to="body">
            <!-- 蒙版 不能把v-if绑定在最外层，因为动画需要v-if去激活使用，加在最外层没有动画效果 -->
            <transition name="fade">
                <div
                    class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
                    v-if="modelValue"
                    @click="emits('update:modelValue', false)"
                ></div>
            </transition>
            <!-- 内容 -->
            <transition name="popup-down-up">
                <div
                    v-if="modelValue"
                    v-bind="$attrs"
                    class="w-screen bg-white z-50 fixed bottom-0 dark:bg-zinc-800"
                >
                    <slot></slot>
                </div>
            </transition>
        </teleport>
    </div>
</template>

<script setup>
import { useScrollLock } from '@vueuse/core'
import { watch } from 'vue'

const props = defineProps({
    modelValue: {
        require: true,
        type: Boolean
    }
})
const emits = defineEmits(['update:modelValue'])

//锁定屏幕滚动，蒙层出现 不可滚动  isLocked 的值控制是不是锁定滚动
const isLocked = useScrollLock(document.body)

watch(
    () => props.modelValue,
    (val) => {
        isLocked.value = val
    },
    {
        immediate: true
    }
)
</script>
<style lang="scss" scope>
//fade 动画
.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s;
}
// 准备进入 离开完成
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

//fade 动画
.popup-down-up-enter-active,
.popup-down-up-leave-active {
    transition: all 0.3s;
}
// 准备进入 离开完成
.popup-down-up-enter-from,
.popup-down-up-leave-to {
    transform: translateY(100%);
}
</style>
